<template>
	<view class="">
		<swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in details.pics" :key="i">
				<view class="swiper-item" @click="onClickImg(i)">
					<image :src="item" mode="aspectFill" :style="{backgroundColor:item}" class="swiper-img" />
				</view>
			</swiper-item>
		</swiper>

		<view class="goods-info">
			<view class="info-box ">
				<view class="between align price-salse">
					<view class="info-price">
						<text>￥</text>
						<text class="price">{{details.sell_price}}</text>
						<text class="original-price">￥{{details.market_price}}</text>
					</view>
					<view class="sthNum">{{teamnum}}人团</view>
				</view>
				<view class="info-name">{{details.title}}</view>
			</view>
		</view>
		<!-- 现有拼团 -->
		<view class="groupBigBox" v-if="sthList.length!=0">
			<view class="between moreBox" @click="open('sthPopup')">
				<view>已有拼团</view>
				<view style="color: #999;">查看更多<image class="moreImg" src="https://wx.2024csnl.com/static/mine/rightArrow.png"></image>
				</view>
			</view>
			<swiper class="swiper" :autoplay="true" :interval="4000" :vertical="true" :circular="true" :duration="2000">
				<swiper-item v-for="(v,i) in sthList">
					<view class=" groupBox" v-for="(item,idx) in sthList.slice(i,i+2)">
						<image :src="item.headimg"></image>
						<view class="nickName hidden">{{item.nickname}}-{{item.id}}</view>
						<view>还差{{item.teamnum - item.num}}人拼成</view>
						<view class="btn" @click="onJoin(3,item.id)">去拼团</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="">
			<view class="label">宝贝详情</view>
			<view v-html="details.content"></view>
		</view>
		<view class="tab-hig" />
		<view class="btm-box  align">
			<view class="buy-now flex-center" @click="onJoin(2)">发起拼团</view>
		</view>
		<uni-popup ref="sthPopup" type="center">
			<view class="hintModalBox">
				<view class="hintTit flex-center">可参与拼团</view>
				<view class="sthPopupOne" v-for="(item,i) in sthList">
					<image :src="item.headimg"></image>
					<view class="nickName hidden">{{item.nickname}}</view>
					<view style="">差{{item.teamnum - item.num}}人</view>
					<view class="joinBtn flex-center" @click="onJoin(3,item.id)">参与拼团</view>
				</view>

			</view>
		</uni-popup>
		<!-- 规格弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="pop-box">
				<view style="margin-bottom: 200rpx;">
					<view class="flex">
						<image :src="popupData.pic" mode="aspectFill" class="goods-img-pop" />
						<view class="fl between column">
							<view class="between">
								<view class="goods-name-pop">{{popupData.name}}</view>
								<image @click="close('popup')" src="https://wx.2024csnl.com/static/goods/detail-close.png" mode="aspectFill"
									class="close-icon" />
							</view>
							<view class="goods-price-pop">￥{{popupData.sell_price}}</view>
						</view>
					</view>
					<view class="" v-for="(item,index) in specificationList">
						<view :class="['tag-label']" style="margin-top: 30rpx;">{{item.title}}</view>
						<view class="flex" style="flex-wrap: wrap;">
							<text @click="selectSpec(index,i)"
								:class="['g-tag',{'tagActive':i==selectSpecification[item.k]}]"
								v-for="(v,i) in item.items">{{v.title}}</text>
						</view>
					</view>
					<view class="">
						<view class="tag-label">数量</view>
						<view class="">
							<view class="flex tag-iconbox">
								<view class="tag-box" @click="setCartNum('sub')">
									<image src="https://wx.2024csnl.com/static/goods/move.png" mode="aspectFill" class="tag-icon" />
								</view>
								<view class="tag-num">{{cartNum}}</view>
								<view class="tag-box" @click="setCartNum('add')">
									<image src="https://wx.2024csnl.com/static/goods/add.png" mode="aspectFill" class="tag-icon" />
								</view>
							</view>
						</view>
					</view>
				</view>

				<button class="confirm-btn" @click="onSubBtn()">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		busGroupBookingDeetails,
		getCommodityDetails,
		getSpecification,
		setShoppingCart,
	} from "@/api/index.js"
	export default {
		data() {
			return {
				teamnum: '',
				timer: '',
				sthList: [], //拼团列表
				idx: 0,
				cartNum: 1, //加购数量
				popupData: {}, //当前选取规格详情
				selectSpecification: [], //当前选取的规格
				specificationList: [], //规格列表
				specificationDetails: {}, //对应规格详情列表
				details: {},
				buytype: null, //拼团方式
				teamId: '', //拼团团id
			}
		},
		onLoad(opt) {
			this.onGetCommodityDetails(opt.id)
		},
		onUnload() {
			clearInterval(this.timer);
		},
		methods: {
			// 商品详情
			async onGetCommodityDetails(id) {
				const res = await busGroupBookingDeetails(`s=/ApiCollage/product&id=${id}`)
				const {
					status,
					msg,
					title,
					product,
					ggselected,
					guigedata,
					guigelist,
					teamList
				} = res.data
				// console.log(res, "详情")
				const content = JSON.parse(product.detail)
				// console.log(content, guigedata)
				if (status == 1) {
					this.sthList = teamList
					this.teamnum = product.teamnum
					this.details = {
						title: product.name,
						content: content[0].content,
						market_price: product.market_price,
						sell_price: product.sell_price,
						sales: product.sales,
						pics: product.pics
					}
					this.specificationList = guigedata
					this.specificationDetails = guigelist
					this.selectSpecification = ggselected
					this.getOneSpecificationDetails()
				} else {
					this.showToast(msg)
				}
			},
	
			onJoin(type, id) {
				if (type == 3) {
					this.teamId = id
				}
				this.buytype = type
				this.open('popup')
			},

			// 点击确认按钮
			async onSubBtn(buytype) {
				const {
					proid,
					id
				} = this.popupData
				this.onSkip(
					`/business/pages/business_tab/sthOrderDetails?proid=${proid}&num=${this.cartNum}&ggid=${id}&buytype=${this.buytype}&teamid=${this.teamId}`
				)
				this.close('popup')
				this.buytype = null
				this.teamId = ''
			},

			// 加购数量操作
			setCartNum(type) {
				if (type == 'add') {
					this.cartNum += 1
				} else {
					this.cartNum == 1 ? this.cartNum = 1 : this.cartNum -= 1
				}
			},
			// 放大轮播图
			onClickImg(i) {
				this.previewImage(i, this.details.pics)
			},

			// 选择规格
			selectSpec(index, i) {
				this.selectSpecification[index] = i
				this.getOneSpecificationDetails()
			},
			// 当前规格详情
			getOneSpecificationDetails() {
				let str = this.selectSpecification.join(',')
				this.popupData = this.specificationDetails[str]
				console.log(this.popupData, 'this.popupDatathis.popupData')
			},

			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.hintTit {
		border-bottom: 1px solid #E6E6E6;
		padding-bottom: 20rpx;
	}

	.sthPopupOne {
		padding: 30rpx 0;
		border-bottom: 1px solid #E6E6E6;
		align-items: center;
		display: grid;
		color: #999;
		grid-template-columns: 13% 38% 25% 25%;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background: #E6E6E6;
		}

		.nickName {
			width: 90%;
		}

		.joinBtn {
			background: #41644A;
			padding: 10rpx 15rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 26rpx;
		}
	}

	.hintModalBox {
		padding: 30rpx;
		border-radius: 30rpx;
		width: 600rpx;
		background: #fff;
		height: 500rpx;
		overflow: auto;
		line-height: 50rpx;
		color: #333333;
		font-size: 28rpx;

		.btn {
			padding: 20rpx 150rpx;
			height: 60rpx;
			background: #F40E2A;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.hintModalBox::-webkit-scrollbar {
		display: none;
	}

	.moreBox {
		padding: 20rpx 30rpx;
		color: #333333;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.moreImg {
		width: 15rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}

	.hidden {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.groupBigBox {
		height: 20vh;
		overflow: auto;

		.groupBox {
			display: grid;
			font-size: 24rpx;
			color: #41644A;
			align-items: center;
			grid-template-columns: 15% 40% 25% 20%;
			padding: 0 30rpx 10rpx;
			background: #fff;
			border-bottom: 20rpx solid #F7F7F7;

			.nickName {
				color: #333333;
				font-size: 26rpx;
				width: 90%;


			}

			.btn {
				border-radius: 10rpx;
				color: #fff;
				padding: 20rpx 28rpx;
				background: #41644A;
			}

			image {
				background: #41644A;
				width: 85rpx;
				height: 85rpx;
				border-radius: 50%;

			}
		}
	}

	.groupBigBox::-webkit-scrollbar {
		display: none;
	}


	.sthNum {
		color: #FF8B03;
		font-size: 34rpx;
		font-weight: 600;
	}

	.swiper-box,
	.swiper-item,
	.swiper-img {
		width: 100%;
		height: 400rpx;
	}

	.goods-info {
		padding: 20rpx;
		background-color: #F7F7F7;

		.info-box {
			padding: 16rpx 20rpx;
			border-radius: 20rpx;
			background-color: #FFF;

			.price-salse {
				font-size: 24rpx;
				color: #999999;
			}

			.info-price {
				color: #FF0404;
			}

			.price {
				font-size: 40rpx;
				font-weight: bold;
			}

			.original-price {
				color: #999999;
				text-decoration: line-through;
				margin-left: 8rpx;
			}

			.info-name {
				font-size: 27rpx;
				margin-top: 16rpx;
			}
		}
	}

	.label {
		line-height: 80rpx;
		padding: 0 30rpx;
	}

	.btm-box {
		padding: 8rpx 40rpx;
		position: fixed;
		left: 0;
		bottom: 20rpx;
		right: 0;

		.buy-now {
			background-color: #41644A;
			color: #FFF;
			border-radius: 40rpx;
			padding: 28rpx 0;
		}
	}

	.pop-box {
		background-color: #FFF;
		padding: 30rpx 20rpx;
		height: 60vh;
		overflow-y: auto;

		.goods-img-pop {
			border-radius: 10rpx;
			background-color: #F5F5F5;
			width: 147rpx;
			height: 147rpx;
			margin-right: 30rpx;
		}

		.goods-name-pop {
			font-size: 30rpx;
		}

		.close-icon {
			width: 24rpx;
			height: 24rpx;
		}

		.goods-price-pop {
			color: #F41717;
		}

		.tag-label {
			font-size: 27rpx;
			margin-top: 64rpx;
		}

		.g-tag {
			display: inline-block;
			font-size: 24rpx;
			line-height: 48rpx;
			padding: 0 24rpx;
			background-color: #F7F7F7;
			border-radius: 8rpx;
			margin: 20rpx 0;
			margin-right: 32rpx;
		}

		.tagActive {
			background: #41644A;
			color: #FFF;
		}

		.tag-iconbox {
			justify-content: flex-end;

			.tag-box {
				width: 47rpx;
				height: 47rpx;
				border: 1rpx solid #E6E6E6;
				text-align: center;
			}

			.tag-num {
				width: 65rpx;
				text-align: center;
				border-top: 1rpx solid #E6E6E6;
				border-bottom: 1rpx solid #E6E6E6;
				line-height: 47rpx;
			}

			.tag-icon {
				width: 27rpx;
				height: 27rpx;
				margin-top: 10rpx;
			}
		}

		.confirm-btn {
			position: fixed;
			bottom: 30rpx;
			width: 95vw;
			background-color: #41644A;
			color: #FFF;
			margin-top: 56rpx;
		}
	}
</style>
